<template>
  <div class="comment-item-wrapper">
    <img :src="computeAvatarUrl(comment.avatar)" alt="Avatar" @click="routeToAuthor(comment.author_id)">
    <div class="comment-wrapper">
      <div class="comment-author-info">{{comment.username || "江户川哀"}}</div>
      <p class="comment-content">{{comment.content}}</p>
      <div class="comment-reply">
        <ul class="operations">
          <li class="like" @click="likeComment" :class="{colorBlue: comment.like}">
            <i class="iconfont icon-like"></i>
            <span>10</span>
          </li>
          <li class="comment" @click="toggleIsReplying">
            <i class="iconfont icon-comment"></i>
            <span>10</span>
          </li>
        </ul>
        <div class="reply-submit-wrapper" v-show="isReplying">
          <text-area :maxlength="500" class="reply-submit-textarea" v-model:value="replyContent"></text-area>
          <button class="reply-submit-button" ref="replySubmitBtn" @click="replyComment">回复</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import TextArea from '@/components/utils/Input/TextArea.vue'

  export default {
    components: {
      TextArea,
    },
    props: {
      comment: {
        type: Object,
        default: () => ({})
      },
      contentType: {
        type: String,
        default: () => ""
      }
    },
    data() {
      return {
        isReplying: false,
        replyContent: ''
      }
    },
    methods: {
      computeAvatarUrl(avatar) {
        return avatar
        ? this.$baseURL + avatar
        : this.$baseURL + this.$defaultAssetUrls.avatar;
      },
      toggleIsReplying() {
        this.isReplying = !this.isReplying;
      },

      likeComment() {
        let payload = {
          name: `like ${this.contentType} comment`,
          url: `${this.contentType}/content/comment/like`,
          data: {
            comment_id: this.comment.id
          }
        }
        this.$post(payload).then(res => {
          if(res.data.success) {
            let isLike = this.comment.like;
            this.comment.like = !isLike;
            if(isLike) {
              this.$alert("取消点赞成功")
            } else {
              this.$alert("点赞成功")
            }
          } else {
            this.$alert({
              type: 'error',
              content: '操作失败'
            })
          }
        }).catch(err => {
            this.$alert({
              type: 'error',
              content: '操作失败'
            })
        })
      },
      replyComment() {
        if(this.replyContent === '') {
          this.$alert({
            type: 'error',
            content: '请先填写回复内容'
          })
          return
        }
        let payload = {
          name: `reply ${this.contentType} comment`,
          url: `${this.contentType}/content/comment/reply/submit`,
          data: {
            comment_id: this.comment.id,
            content: this.replyContent
          }
        }
        this.$refs.replySubmitBtn.disabled = true
        this.$post(payload).then(res => {
          if(res.data.success) {
            this.$alert("回复成功!")
            this.replyContent = ''
          } else {
            this.$alert({
              type: 'error',
              content: '回复失败'
            })
          }
          this.$refs.replySubmitBtn.disabled = false
        }).catch(err => {
          this.$alert({
            type: 'error',
            content: '回复失败'
          })
          this.$refs.replySubmitBtn.disabled = false
        })
      }

    },
  }
</script>

<style lang="less" scoped>
@w: var(--commentItemWidth);
@fs: calc(@w * 0.025);
@a: calc(@w * 0.06);

.comment-item-wrapper {
  height: 100%;
  padding: @fs 0;

  display: flex;
  justify-content: left;
  border-bottom: 1px solid var(--light);

  img {
    width: @a;    
    height: @a;
    border-radius: 50%;

    overflow: hidden;

    &:hover {
      cursor: pointer;
    }
  }

  .comment-wrapper { 
    margin-left: calc(@w * 0.03);
    width: calc(@w * 0.8);

    .comment-author-info {
      margin-bottom: calc(@fs * 0.3);

      font-size: calc(@fs * 0.8);
      line-height: 1.5;
      font-family: Arial, Helvetica, sans-serif;
    }

    .comment-content {
      font-size: calc(@fs * 0.7);
      font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
      line-height: calc(@fs * 1.5);
      min-height: calc(@fs * 1.5);

      word-break: break-all;
      white-space: pre-wrap;
    }

    .comment-reply {
      .operations {
        height: calc(@w * 0.03);

        display: flex;
        justify-content: left;
        align-items: center;

        li {
          padding: 0;

          display: flex;
          justify-content: center;
          align-items: center;

          height: 100%;

          &:not(:first-child) {
            margin-left: calc(@w * 0.02);
          }

          &:hover {
            color: var(--blue);
            cursor: pointer;
          }

          i, span {
            font-size: calc(@w * 0.015);
            pointer-events: none;
          }

          span {
            margin-left: calc(@w * 0.01);
          }
        }
      }

      .reply-submit-wrapper {
        margin-top: @fs;

        .reply-submit-textarea {
          --textAreaWidth: calc(@w * 0.8);
          --textAreaHeight: calc(@w * 0.1);
        }

        .reply-submit-button {
          margin-top: calc(@w * 0.015);
          float: right;

          width: calc(@fs * 3.5);
          height: calc(@fs * 1.8);
          border: 1px solid var(--gray);
          border-radius: calc(@fs * 0.2);

          line-height: calc(@fs * 1.8);
          font-size: calc(@fs * 0.8);

          &:hover {
            border-color: var(--blue);
            color: var(--blue);
          }
        }
      }
    }
  }
}
</style>